@include('Home.head')
<style>
    .logistics-item{
        margin: 1rem 0;
    }
    .logistics-icon{
        height: .6rem;
        width: .6rem;
        background-color: #ccc;
        border-radius: 50%;
    }

</style>
<body>
<div class="container" id="app">
    <header data-am-widget="header" class="am-header am-header-default my-header" style="background-color: white;">
        <div class="am-header-left am-header-nav">
            <a href="javascript:history.back(-1);" class="">
                <i class="am-header-icon am-icon-chevron-left" style="color: #000000;"></i>
            </a>
        </div>
        <h1 class="am-header-title">
            <a href="#title-link" class="" style="color: #000000;">详情信息</a>
        </h1>
        <div class="am-header-right am-header-nav">
            <a href="#right-link" class="">
                <i class="am-header-icon  am-icon-home" style="color: #000000;"></i>
            </a>
        </div>
    </header>
	<div class="gray-panel">
    	<div class="paoduct-title-panel">
        	<h2 class="checkout-h2"><span class="am-badge am-round am-badge-warning ">1</span> 订单信息</h2>
            <div>
                <div class="cart-list-panel" style="border: none;box-shadow:none">
                    <ul class="am-avg-sm-1 cart-panel-ul">
                        <li v-for="val in order.supplyOrderGoods" style="height: auto;">
                            <div class="imgpanel"><a v-on:click="jump(val.goodsid)"><img :src="val.sku_image" class="am-img-responsive" style="display: block;width: 100%;height: 100%;" /></a></div>
                            <div class="infopanel">
                                <h3 style="width: 140px;"><a v-on:click="jump(val.goodsid)">@{{ val.sku_name }}</a></h3>
                                <!-- <p>品牌：新世界</p> -->
								<p>单价：<span class="red2 bold">@{{ val.price }}</span> 元</p>
								<p>总数量：@{{ val.num }}</p>
                                <p>总价格：<span class="red2 bold">@{{ order.order_money }}</span>
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- <div class="cart_foot">共选中：<span class="red2 bold" id="total_good">@{{ order.totalNumber }}</span>种商品，
                    总数量：<span class="red2 bold" id="total_jifen">@{{ order.totalShopNumber }}</span> 个，
                   邮费：<span class="red2 bold" id="total_amount" v-if="order.is_self == 0">@{{ order.freight }}</span>
                    <span class="red2 bold" id="total_amount" v-if="order.is_self == 1">自提</span>元，
                    总价：<span class="red2 bold" id="total_amount">@{{ order.originalprice }}</span>元
                </div> -->
                {{--<div class="cart_foot">共选中：<span class="red2 bold" id="total_good">@{{ order.totalNumber }}</span>种商品，总数量：<span class="red2 bold" id="total_jifen">@{{ order.totalShopNumber }}</span> 个， 总价：<span class="red2 bold" id="total_amount">@{{ order.originalprice }}</span>元</div>--}}
            </div>

            {{--<div class="cart_foot">共选中：<span class="red2 bold" id="total_good">@{{ total }}</span> 种商品，总价：<span class="red2 bold" id="total_amount">@{{ totalPrice }}</span> 元，总数量：<span class="red2 bold" id="total_jifen">@{{ totalNumber }}</span> 个</div>--}}
        </div>
        <div class="paoduct-title-panel">
            <h2 class="checkout-h2"><span class="am-badge am-round am-badge-warning ">2</span> 收货信息</h2>
            <div class="partners-title-panel" >

               <div class="partners-title-panel-title "  style="height: auto;padding-left: 10px;background-color: white;border: none;">
					<p>收货姓名：@{{ order.name }}</p>
					<p>收货电话：@{{ order.mobile }}</p>
					<p>收货地址：@{{ order.full_address }}</p>
                </div>
            </div>
        </div>
        <!-- v-show="order.status != 1" -->
		<div class="paoduct-title-panel" >
		    <div class="checkout-h2" style="display: flex;"><img style="height: 2rem; margin-right: 0.2rem;" class="am-img-responsive" src="/img/home/logistics.png" alt="物流信息"/> 物流信息</div>
         
		    <div class="logistics-item" v-for="(val,index) in tracesList" :key="val.time">
                <div style="display: flex">
                <div class="logistics-icon" v-if='index !== 0'></div>
                <div class="logistics-icon" style="background-color: skyblue;" v-else></div>
                <div style="flex: 1;margin-left: 1rem">
                    <div>@{{val.remark}}</div>
                    <div style='color: red; font-size:12px'>@{{val.datetime}}</div>
                </div>
                </div>
            </div>
		</div>
    </div>
    @include('Home.foot')
</div>
</body>

<script>
    
    var app = new Vue({
        el: "#app",
        data: {
            title: '我的订单',
            order:{},
            tracesList: [] 
        },
        methods: {
			formatDateTime: function (timeStamp) {
			    var date = new Date();
			    date.setTime(timeStamp * 1000);
			    var y = date.getFullYear();
			    var m = date.getMonth() + 1;
			    m = m < 10 ? ('0' + m) : m;
			    var d = date.getDate();
			    d = d < 10 ? ('0' + d) : d;
			    var h = date.getHours();
			    h = h < 10 ? ('0' + h) : h;
			    var minute = date.getMinutes();
			    var second = date.getSeconds();
			    minute = minute < 10 ? ('0' + minute) : minute;
			    second = second < 10 ? ('0' + second) : second;
			    return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
			},
            //初始化 系统管理员列表
            initialize: function () {
				var rico = this
                var id = this.obtain('id');
                if (id > 0) {
                    $.post("/home/index/order_details", {'_token': '{{csrf_token()}}',order_no:id}, function (res) {
                        if (res.code) {
                            app.tracesList = res?.data?.traces?.list ? res.data.traces.list.reverse() :[];
						    app.order = res.data;
                        } else {
                            layer.msg(res.data);
                        }
                    });
                }
            },
            jump:function (id) {
                window.location.href='/home/microShop/productmicro?id='+id;
            },
            //获取url id
            obtain:function (val) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == val){
                        return pair[1];
                    }
                }
            },
        },
        //自动执行
        mounted: function () {
            this.initialize();
        },
    })
</script>
</html>
